<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="1000" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="100px">
			<el-form-item label="商品名称" prop="product_title">
				<el-input v-model="form.product_title"></el-input>
			</el-form-item>
			<el-form-item label="封面图片" prop="product_image">
				<sc-oss-upload v-model="form.product_image" :data="data" :apiObj="apiObj"
					accept="image/jpg,image/png,image/jpeg" :width="220">
					<div class="custom-empty">
						<el-icon><el-icon-upload /></el-icon>
						<p>封面图片</p>
					</div>
				</sc-oss-upload>
			</el-form-item>
			<el-form-item label="商品sku" prop="skus">
				<sc-form-table ref="table" v-model="form.skus" drag-sort placeholder="暂无数据" hideAdd hideDelete>
					<el-table-column prop="title" label="名称/描述" min-width="150">
						<template #default="scope">
							<el-input v-model="scope.row.sku_title" placeholder="请输入名称" disabled></el-input>
							<el-input v-model="scope.row.sku_description" placeholder="请输入描述" disabled></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="price" label="预付/尾款" width="120">
						<template #default="scope">
							<el-input label="预付" v-model="scope.row.sku_deposit_price" placeholder="预付"
								disabled></el-input>
							<el-input label="尾款" v-model="scope.row.sku_final_payment" placeholder="尾款"
								disabled></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="sku_stock" label="库存" width="110" align="center">
						<template #default="scope">
							<el-input v-model="scope.row.sku_stock" disabled></el-input>
						</template>
					</el-table-column>
					<el-table-column prop="title" label="名称/描述" min-width="150">
						<template #default="scope">
							<el-input disabled v-model="scope.row.sku_title" placeholder="请输入名称"></el-input>
							<el-input v-model="scope.row.sku_description" placeholder="请输入描述" disabled></el-input>
						</template>
					</el-table-column>
					<el-table-column label="选择" fixed="right" align="right" width="160">
						<template #default="scope">
							<el-button-group>
								<el-popconfirm title="确定赠送此商品吗？" @confirm="handleSendGift(scope.row, scope.$index)">
									<template #reference>
										<el-button text type="primary" size="small">选择</el-button>
									</template>
								</el-popconfirm>
							</el-button-group>
						</template>
					</el-table-column>
				</sc-form-table>
			</el-form-item>
			<template v-if="form.sku_id">
				<el-form-item label="客户手机" prop="contact_phone">
					<el-input maxlength="11" v-model="form.contact_phone" placeholder="请输入客户手机号码" clearable></el-input>
				</el-form-item>
				<el-form-item label="客户姓名" prop="contact_name">
					<el-input v-model="form.contact_name" placeholder="请输入客户姓名" clearable></el-input>
				</el-form-item>
				<el-form-item label="赠送订单备注" prop="order_remark">
					<el-input v-model="form.order_remark" clearable type="textarea"></el-input>
				</el-form-item>
			</template>
		</el-form>
		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSaveing" @click="submit()">赠 送</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				mode: "add",
				titleMap: {
					add: '礼品赠送',
				},
				visible: false,
				isSaveing: false,
				//表单数据
				form: {
					contact_phone: null,
					contact_name: null,
					order_remark: "",
					sku_id: null
				},
				//验证规则
				rules: {
					contact_phone: [{
						required: true,
						message: '请输入客户手机号码'
					}],
					contact_name: [{
						required: true,
						message: '请输入客户姓名'
					}]
				},
				//所需数据选项
				groups: [],
				groupsProps: {
					value: "id",
					label: "cat_name",
					emitPath: false,
					checkStrictly: true
				}
			}
		},
		mounted() {


		},
		methods: {
			//显示
			open(mode = 'add') {
				this.mode = mode;
				this.visible = true;
				return this
			},
			handleSendGift(row) {
				if (parseFloat(row.sku_deposit_price) > 0) {
					return this.$alert("只能赠送预付为0元的礼品", "提示", {
						type: 'error'
					})
				}
				this.form.sku_id = row.id;
			},
			//表单提交方法
			submit() {
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						var res;
						res = await this.$API.system.order.sendGift.post(this.form);
						this.isSaveing = false;
						if (res.code == 0) {
							this.$emit('success', this.form, this.mode)
							this.visible = false;
							this.$message.success(res.message)
						} else {
							this.$alert(res.message, "提示", {
								type: 'error'
							})
						}
					}
				})
			},
			//表单注入数据
			setData(data) {
				this.form = Object.assign(this.form, data)
			}
		}
	}
</script>

<style>
</style>
